﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2017-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: control compass</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Add a compass to an ol map or layer." />
  <meta name="keywords" content="ol3, control, canvas, compass" />

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <style>
    /* Define the size and position in the css */
    .ol-compassctrl.top {
      top: calc(50% - 50px);
      left: 0;
      width: 100px;
      height: 100px;
    }
    .ol-compassctrl.bottom {
      top: auto;
      left: auto;
      bottom: 10px;
      right: 0;
      width: 150px;
      height: 150px;
      -webkit-transform: none;
      transform: none;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: control compass</h1>
  </a>
  <div class="info">
    The <i>ol.control.Compass</i> draw a compass on a map.
    <br/>
    Use the <i>ol-compassctrl</i> CSS class to place the compass on the map.
    <br/>
    You can change the compass image, so this can be used to draw a compass, an icon or a watermark on the map. 
    <br/>
    The image can rotate with the map. Lines can be added.
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul>
      <li>
        Color:
        <select id="color" onchange="setCompass();">
          <option value="#963">brown</option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="blue">blue</option>
          <option value="gray">gray</option>
        </select>
      </li>
      <li>
        Image: 
        <select id="image" onchange="setCompass();">
          <option value="../data/piratecontrol.png">Pirate</option>
          <option value="default">default</option>
          <option value="compact">compact</option>
        </select>
      </li>
      <li>
        <input id="line" type="checkbox" onchange="setCompass();" checked="checked" /><label for="line"> showlines</label>
      </li>
      <li>
        <input id="rotate" type="checkbox" onchange="setCompass();" checked="checked" /><label for="rotate"> rotate with view</label>
      </li>
      <li>
        <input id="top" type="checkbox" onchange="setCompass();" checked="checked" /><label for="top"> display 2 controls</label>
      </li>
    </ul>
  </div>
  
  <script type="text/javascript">

    // The map
    var map = new ol.Map ({
      target: 'map',
      view: new ol.View ({
        zoom: 14,
        center: [270148, 6247782]
      }),
      layers: [new ol.layer.Tile({
        name: "OSM",
        source: new ol.source.OSM(),
        visible: true
      })]
    });

    // Compass control
    var compass, compassBottom;

    function setCompass() {
      if (compass) map.removeControl(compass);
      if (compassBottom) map.removeControl(compassBottom);
      if ($("#top").prop("checked")) {
        compass = new ol.control.Compass ({
          className: "top",
          src: $("#image").val(),
          // rotateWithView: $("#rotate").prop("checked"),
          style: new ol.style.Stroke ({ color: $("#color").val(), width: ($("#line").prop("checked") ? 1 : 0) })
        });
        map.addControl(compass);
      }
      else compass = false;
      compassBottom = new ol.control.Compass ({
        className: "bottom",
        src: $("#image").val(),
        rotateWithView: $("#rotate").prop("checked"),
        style: new ol.style.Stroke ({ color: $("#color").val(), width: ($("#line").prop("checked") ? 1 : 0) })
      });
      map.addControl(compassBottom);
    }

    setCompass();
        
  </script>

</body>
</html>